<template>
  <div>
    <el-submenu v-if="items.children.length>0" :index="items.path" v-for="items in menuData" :key="items.id">
      <template slot="title">{{language(items.name)}}</template>
<!--      <el-menu-item v-if="items.children.length===0" :index="items.path">{{items.name}}</el-menu-item>-->
      <tree-menu :menuList="items.children"></tree-menu>
    </el-submenu>
    <el-menu-item v-if="items.children.length===0" :index="items.path" v-for="items in menuData" :key="items.id">{{language(items.name)}}</el-menu-item>
  </div>
</template>

<script>

  import lang from '@/utils/language'

  export default {
    name: "TreeMenu",
    props:{
      menuList:Array
    },
    methods:{
      language(title) {
        return lang('zhCN','menu',title)
      }
    },
    data(){
      return {
        menuData:this.menuList,
      }
    },
    watch:{
      menuList(val){
        JSON.parse(JSON.stringify(val))
        this.menuData = val
      }
    }
  }
</script>

<style scoped>

</style>
